<template>
  <div>
    <el-dialog
      :title="param.id ? translate('temEdit') : translate('temAdd')"
      :visible.sync="isShowModal"
      width="580px"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="auto"
        label-suffix="："
      >
        <el-form-item :label="translate('sysType')" prop="title">
          <el-select v-model="param.smsType" disabled>
            <el-option :label="translate('yxSms')" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item :label="translate('templateName')" prop="title">
          <el-input
            v-model="param.title"
            type="text"
            :placeholder="translate('qsrbcg30')"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item :label="translate('templateCon')" prop="template">
          <el-input
            id="textareaId"
            v-model="param.template"
            type="textarea"
            :rows="6"
            :placeholder="translate('qsr')"
          />
        </el-form-item>
        <el-form-item :label="translate('crtpf')">
          <div class="df_ac">
            <el-button @click="changeSysInfo('{memberName}')">{{
              translate("memberName")
            }}</el-button>
            <el-button class="mr10" @click="changeSysInfo('{gymName}')">{{
              translate("venueName")
            }}</el-button>
            <el-select v-model="param.path" @change="changeAddress">
              <el-option
                v-for="item in options"
                :key="item.val"
                :label="item.name"
                :value="item.val"
              />
            </el-select>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowModal = false">{{
          translate("cancel")
        }}</el-button>
        <el-button
          v-preventReClick
          :loading="subLoading"
          type="primary"
          @click="onSubmit()"
        >{{ translate("enter") }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { smsTemplateEdit, smsTemplateOption, configDictionaries } from '@/api'
export default {
  data() {
    return {
      subLoading: false,
      param: {
        template: '',
        smsType: '1'
      },
      options: [],
      rules: {
        title: [{ required: true, message: this.translate('titlePlace'), trigger: 'blur' }],
        template: [{ required: true, message: this.translate('templateConP'), trigger: 'blur' }]
      },
      addressList: [],
      isShowModal: false
    }
  },
  created() {
    this.initData()
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = { ...this.param }
          // if (param.template && !param.id) {
          //   param.template = param.template + ' --拒收请回复R'
          // }
          this.subLoading = true
          smsTemplateEdit({
            param
          }).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.translate('tjScs'))
              this.handleClose()
              this.$emit('success')
            }
          }).catch(err => {
            this.subLoading = false
            console.log(err)
          })
        }
      })
    },
    changeSysInfo(val) {
      const smsInfo = this.param.template || ''
      const textareaEle = document.querySelector('#textareaId')
      const startPos = textareaEle.selectionStart
      if (startPos || startPos === 0) {
        const arr = smsInfo.split('')
        arr.splice(startPos, 0, `${val}`)
        this.$set(this.param, 'template', arr.join(''))
      } else {
        this.$set(this.param, 'template', smsInfo + `${val}`)
      }
    },
    changeAddress(val) {
      smsTemplateOption({ param: { path: val }}).then(res => {
        this.changeSysInfo(res.record.miniProgramLink)
      })
    },
    initData() {
      configDictionaries({ param: { codes: 'WX_URL' }}).then(res => {
        this.options = JSON.parse(res.recordList[0].val)
      })
    },
    changeValue(val) {
      const { template } = this.param
      this.$set(this.param, 'template', template + `{{${val}}}`)
    },
    handleClose() {
      this.isShowModal = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 20px;
}
.device-uploaders {
  ::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
  ::v-deep .el-upload {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}
</style>
